<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Babylon.js 字体图标示例</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.babylonjs.com/babylon.js"></script>
  <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#7B61FF',
            accent: '#FF7D00',
            dark: '#1D2129',
            light: '#F2F3F5'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .bg-gradient-blue {
        background: linear-gradient(135deg, #165DFF 0%, #7B61FF 100%);
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">
  <!-- 顶部导航 -->
  <header class="bg-white shadow-md">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-cube text-primary text-2xl"></i>
        <h1 class="text-xl font-bold text-dark">Babylon.js <span class="text-primary">字体图标渲染</span></h1>
      </div>
      <nav>
        <ul class="flex space-x-6">
          <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a></li>
          <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">示例</a></li>
          <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">文档</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- 控制面板 -->
      <div class="lg:col-span-1 bg-white rounded-xl shadow-lg p-6 card-hover">
        <h2 class="text-xl font-bold mb-4 flex items-center">
          <i class="fa fa-sliders text-primary mr-2"></i>控制面板
        </h2>
        
        <div class="space-y-6">
          <!-- 选择图标 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">选择图标</label>
            <select id="iconSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all">
              <option value="fa-heart">Heart <i class="fa fa-heart ml-2"></i></option>
              <option value="fa-star">Star <i class="fa fa-star ml-2"></i></option>
              <option value="fa-coffee">Coffee <i class="fa fa-coffee ml-2"></i></option>
              <option value="fa-rocket">Rocket <i class="fa fa-rocket ml-2"></i></option>
              <option value="fa-gamepad">Gamepad <i class="fa fa-gamepad ml-2"></i></option>
              <option value="fa-code">Code <i class="fa fa-code ml-2"></i></option>
              <option value="fa-bolt">Bolt <i class="fa fa-bolt ml-2"></i></option>
              <option value="fa-tree">Tree <i class="fa fa-tree ml-2"></i></option>
            </select>
          </div>
          
          <!-- 调整大小 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">图标大小</label>
            <div class="flex items-center space-x-3">
              <input type="range" id="sizeSlider" min="1" max="10" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
              <span id="sizeValue" class="text-sm font-medium text-gray-700 min-w-[30px] text-center">5</span>
            </div>
          </div>
          
          <!-- 调整颜色 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">图标颜色</label>
            <div class="grid grid-cols-5 gap-2">
              <button class="color-option w-8 h-8 rounded-full bg-red-500 border-2 border-transparent hover:border-gray-400 transition-all" data-color="#ef4444"></button>
              <button class="color-option w-8 h-8 rounded-full bg-blue-500 border-2 border-transparent hover:border-gray-400 transition-all" data-color="#3b82f6"></button>
              <button class="color-option w-8 h-8 rounded-full bg-green-500 border-2 border-transparent hover:border-gray-400 transition-all" data-color="#22c55e"></button>
              <button class="color-option w-8 h-8 rounded-full bg-yellow-500 border-2 border-transparent hover:border-gray-400 transition-all" data-color="#eab308"></button>
              <button class="color-option w-8 h-8 rounded-full bg-purple-500 border-2 border-2 border-primary" data-color="#a855f7"></button>
            </div>
          </div>
          
          <!-- 渲染按钮 -->
          <button id="renderButton" class="w-full bg-gradient-blue text-white py-3 px-4 rounded-lg font-medium hover:shadow-lg transition-all flex items-center justify-center">
            <i class="fa fa-refresh mr-2"></i> 渲染图标
          </button>
        </div>
      </div>
      
      <!-- 3D 渲染区域 -->
      <div class="lg:col-span-2 bg-white rounded-xl shadow-lg overflow-hidden card-hover">
        <div class="p-6 border-b border-gray-100">
          <h2 class="text-xl font-bold flex items-center">
            <i class="fa fa-cube text-primary mr-2"></i>3D 渲染视图
          </h2>
        </div>
        <div id="renderCanvas" class="w-full aspect-square bg-gray-100"></div>
      </div>
    </div>
    
    <!-- 图标信息 -->
    <div class="mt-8 bg-white rounded-xl shadow-lg p-6 card-hover">
      <h2 class="text-xl font-bold mb-4 flex items-center">
        <i class="fa fa-info-circle text-primary mr-2"></i>关于字体图标渲染
      </h2>
      <div class="grid md:grid-cols-2 gap-6">
        <div>
          <h3 class="font-medium text-lg mb-2">技术说明</h3>
          <p class="text-gray-600 leading-relaxed">
            本示例使用 Babylon.js 3D 引擎渲染字体图标。通过将 Font Awesome 图标转换为路径数据，然后使用 Babylon.js 的 ExtrudeShape 方法创建 3D 模型。
            你可以通过控制面板调整图标类型、大小和颜色，体验不同的视觉效果。
          </p>
        </div>
        <div>
          <h3 class="font-medium text-lg mb-2">使用提示</h3>
          <ul class="text-gray-600 space-y-2">
            <li class="flex items-start">
              <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
              <span>选择不同的图标查看各种 3D 效果</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
              <span>调整大小滑块可改变图标的尺寸</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
              <span>点击颜色选项可更改图标的外观</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-check-circle text-green-500 mt-1 mr-2"></i>
              <span>点击渲染按钮应用更改</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-8 mt-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <h3 class="text-lg font-bold mb-4">关于项目</h3>
          <p class="text-gray-400">
            本项目展示了如何使用 Babylon.js 渲染 3D 字体图标。通过简单的界面，你可以体验不同的图标效果。
          </p>
        </div>
        <div>
          <h3 class="text-lg font-bold mb-4">相关资源</h3>
          <ul class="space-y-2">
            <li><a href="https://www.babylonjs.com/" target="_blank" class="text-gray-400 hover:text-white transition-colors">Babylon.js 官网</a></li>
            <li><a href="https://fontawesome.com/" target="_blank" class="text-gray-400 hover:text-white transition-colors">Font Awesome</a></li>
            <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API" target="_blank" class="text-gray-400 hover:text-white transition-colors">WebGL 文档</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-lg font-bold mb-4">联系我们</h3>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-github text-xl"></i></a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-twitter text-xl"></i></a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-linkedin text-xl"></i></a>
          </div>
        </div>
      </div>
      <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
        <p>&copy; 2025 Babylon.js 字体图标渲染示例. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <script>
    // 等待DOM加载完成
    document.addEventListener('DOMContentLoaded', function() {
      // 获取DOM元素
      const canvas = document.getElementById('renderCanvas');
      const iconSelect = document.getElementById('iconSelect');
      const sizeSlider = document.getElementById('sizeSlider');
      const sizeValue = document.getElementById('sizeValue');
      const colorOptions = document.querySelectorAll('.color-option');
      const renderButton = document.getElementById('renderButton');
      
      // 当前选中的颜色
      let currentColor = '#a855f7';
      
      // 更新大小显示
      sizeSlider.addEventListener('input', function() {
        sizeValue.textContent = this.value;
      });
      
      // 选择颜色
      colorOptions.forEach(option => {
        option.addEventListener('click', function() {
          // 移除所有选中状态
          colorOptions.forEach(opt => opt.classList.remove('border-primary'));
          colorOptions.forEach(opt => opt.classList.add('border-transparent'));
          
          // 添加选中状态
          this.classList.remove('border-transparent');
          this.classList.add('border-primary');
          
          // 更新当前颜色
          currentColor = this.getAttribute('data-color');
        });
      });
      
      // 创建引擎
      const engine = new BABYLON.Engine(canvas, true);
      
      // 字体图标路径数据
      const fontPaths = {
        'fa-heart': 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
        'fa-star': 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z',
        'fa-coffee': 'M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm-4 10c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5h10v8zm2-8h-2V5h2v2z',
        'fa-rocket': 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
        'fa-gamepad': 'M15 7.5V2H9v5.5c-3.09 0-5.5 2.41-5.5 5.5v5c0 3.09 2.41 5.5 5.5 5.5h6c3.09 0 5.5-2.41 5.5-5.5v-5c0-3.09-2.41-5.5-5.5-5.5zm-3.5 10h-5v-5h5v5zm0-7h-5V4h5v6.5zm7 7h-5v-5h5v5zm0-7h-5V4h5v6.5z',
        'fa-code': 'M20 14.5V10c0-.55-.45-1-1-1h-3.5c-.28 0-.5-.22-.5-.5v-2c0-.28.22-.5.5-.5H20c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1H9.5c-.28 0-.5.22-.5.5v2c0 .28.22.5.5.5H14c.55 0 1 .45 1 1v4.5c0 .28-.22.5-.5.5h-2c-.28 0-.5-.22-.5-.5V6H4v8c0 .55.45 1 1 1h5v2.5c0 .28.22.5.5.5h2c.28 0 .5-.22.5-.5V15h5c.55 0 1-.45 1-1zM7 9h2V7H7v2zm10 6h-2v-2h2v2zm0-4h-2V7h2v4z',
        'fa-bolt': 'M15.5 1.51l-7 1c-.38.05-.68.37-.72.75l-.9 8.23H7.5c-.41 0-.75.34-.75.75s.34.75.75.75h3.74l-1.3 8.48c-.05.38.27.72.65.72.24 0 .46-.12.59-.33l7-11c.16-.25.16-.55 0-.8l-7-4c-.13-.07-.28-.11-.44-.11zm-4.36 14.49l.9-8.24h-1.8l.9 8.24h.9z',
        'fa-tree': 'M10 15c1.66 0 3-1.34 3-3V3h2v9c0 2.76-2.24 5-5 5s-5-2.24-5-5V3h2v9c0 1.66 1.34 3 3 3zm-7 6l2.3-2.3c.94.57 2.01.9 3.2.9 1.19 0 2.26-.33 3.2-.9L17 21h-3.5l-2.3-2.3c.58-.34 1.08-.78 1.5-1.3L14.5 18H16l-4-4-4 4h1.5l1.3 1.3c-.42.52-.92.96-1.5 1.3L7.5 21H4z'
      };
      
      // 创建场景
      let scene;
      let iconMesh;
      
      // 初始化场景
      function initScene() {
        // 创建场景
        scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3.FromHexString('#f3f4f6');
        
        // 添加相机
        const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);
        camera.lowerRadiusLimit = 3;
        camera.upperRadiusLimit = 15;
        
        // 添加光源
        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
        light.intensity = 0.7;
        
        const light2 = new BABYLON.DirectionalLight("light2", new BABYLON.Vector3(1, -1, -1), scene);
        light2.intensity = 0.5;
        
        // 渲染循环
        engine.runRenderLoop(function() {
          scene.render();
        });
        
        // 窗口大小调整
        window.addEventListener('resize', function() {
          engine.resize();
        });
      }
      
      // 渲染图标
      function renderIcon() {
        // 清除之前的图标
        if (iconMesh) {
          iconMesh.dispose();
        }
        
        // 获取选中的图标和参数
        const selectedIcon = iconSelect.value;
        const size = parseFloat(sizeSlider.value);
        const color = BABYLON.Color3.FromHexString(currentColor);
        
        // 解析SVG路径
        const svgPath = fontPaths[selectedIcon];
        const shape = BABYLON.SVGParser.ParsePaths(svgPath);
        
        // 规范化形状
        BABYLON.ShapePath.Normalize(shape);
        
        // 创建网格
        iconMesh = BABYLON.MeshBuilder.ExtrudeShape("icon", {
          shape: shape,
          depth: size / 5,
          sideOrientation: BABYLON.Mesh.DOUBLESIDE
        }, scene);
        
        // 应用材质
        const material = new BABYLON.StandardMaterial("iconMaterial", scene);
        material.diffuseColor = color;
        material.specularColor = new BABYLON.Color3(0.2, 0.2, 0.2);
        iconMesh.material = material;
        
        // 设置位置和缩放
        iconMesh.scaling = new BABYLON.Vector3(size, size, size);
        iconMesh.position.y = 0;
      }
      
      // 初始化场景
      initScene();
      
      // 默认渲染一个图标
      renderIcon();
      
      // 渲染按钮点击事件
      renderButton.addEventListener('click', renderIcon);
    });
  </script>
</body>
</html>
    